<%@page import="com.gpstracking.BE.Dispositivo"%>
<%@page import="com.gpstracking.BL.DispositivoBL"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@	page import="java.util.*" %> 
<%@ page import="com.gpstracking.BL.AreaBL " %>   
<%@ page import="com.gpstracking.BE.Area" %>
<%@ page import="com.gpstracking.BE.Usuario" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US"> 

	<head>
		<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
		<meta charset="UTF-8" />
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<meta name="author" content="" />
		
		  <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { 
      	height: 400px;
      	width: 360px;
      	position: relative; 
       }
    </style>
    <script type="text/javascript"
    	src="http://maps.googleapis.com/maps/api/js?key=AIzaSyC5S9soHyeEA9TCIfxAGUo3fOqJfTh4eFk&sensor=false">
    </script>
    <script type="text/javascript"  
    	src="../js/geometry.js" >
    </script>
        
    <script type="text/javascript"
      	src="../js/defDispositivos.js" >
    </script>
    <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
   
		
		<!--========= STYLES =========-->
		<link rel="stylesheet" href="../css/reset.css" />
		<link rel="stylesheet" href="../css/grid.css" />
		<link rel="stylesheet" href="../css/uniform.default.css" />
		<link rel="stylesheet" href="../css/chosen.css" />
		<link rel="stylesheet" href="../plugins/jqueryui/all/themes/base/jquery.ui.all.css" />
		<link rel="stylesheet" href="../plugins/datatables/media/css/demo_page.css" />
		<link rel="stylesheet" href="../plugins/datatables/media/css/demo_table_jui.css" />
		
		<link rel="stylesheet" href="../css/mobile.css" />
		<link rel="stylesheet" href="../css/config.css" />
		<!--[if gte IE 8]><link rel="stylesheet" href="css/ie8.css" /><![endif]-->
		
		<!--============ JQUERY =============-->
		<script src="../js/jquery.js" type="text/javascript"></script>		
		<script src="../js/jquery.uniform.js" type="text/javascript"></script>
		<script src="../js/chosen.jquery.js" type="text/javascript"></script>
		<script src="../js/jquery.placeholder.js" type="text/javascript"></script>
		<script src="../plugins/jqueryui/all/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
		<script type="text/javascript" src="../js/scriptbreaker-multiple-accordion-1.js"></script>
		<script type="text/javascript" src="../plugins/datatables/media/js/jquery.dataTables.js"></script>
		<script src="../js/head_scripts.js" type="text/javascript"></script>

		<!--============ qtip2 =============-->
		<script src="../js/jquery.qtip.js" type="text/javascript"></script>
		<link rel="stylesheet" href="../css/jquery.qtip.css" />
				
		<!--============ MyOwn =============-->
		<script src="../js/showdetails.js" type="text/javascript"></script>
		<script src="../js/controller/deviceTracking.js" type="text/javascript"></script>
		
		
								
		<!--=== ENABLE HTML5 TAGS FOR IE ===-->
		<!--[if IE]><script src="js/html5.js"></script><![endif]-->
		
		<title>GPS Tracking</title>
	</head>
	<% 
		Usuario user = (Usuario)session.getAttribute("user");		
		AreaBL areaController = new AreaBL();
		List<Area> areasActivas = areaController.listarAreas(user);
		DispositivoBL dispositivoBL = new DispositivoBL();
		List<Dispositivo> dispositivosActivos = dispositivoBL.activos(user);
	
	 %>
	<body onload="initialize()">
		
		<!-- <table>
		<tr><td>
		</td></tr> -->
			<section class="container">
		<!--	<section class="container_12">
				<section id="page_content" class="page_content">-->
					<jsp:include page="../mobile/menu.jsp" />				
					<div class="clear"></div>
					<div class="grid_5">
						<div class="box">
							<h2>
								Monitoreo de Dispositivos
								<span class="l"></span><span class="r"></span>
							</h2>
							<div class="hide"><span class="s">+</span><span class="h">-</span></div>
							<div class="block">
								<div class="block_in">
									<!-- Mapa con los dispositivos y las areas pintadas-->
									<div id="map_canvas" ></div>									
								</div>
							</div>
						</div>
					</div> 
					<!-- End of .grid_12 Monitoreo dispositivos-->
					
					<div class="clear"></div>
					
					<div class="grid_5">
						<div class="box">
							<div class="block">
								<div class="box">
									<h2>
										Dispositivos
										<span class="l"></span><span class="r"></span>
									</h2>
									<div class="hide"><span class="s">+</span><span class="h">-</span></div>
									<div class="block">
									<!-- BEGIN TABLE -->
									<table class="display basictable">
										<thead>
											<tr>
												<th>Nombre</th>
												<th>Descripcion</th>
												<th>Localización aproximada</th>
												<th>Color</th>
												<th>Mostrar</th>
											</tr>
										</thead>
										<tbody>
											<% for( Dispositivo d : dispositivosActivos) { %>
											<!-- talvez seria mejor mostrar onMouse-->
											<tr id="<% out.println(d.getIdDispositivo()); %>" class="lineaDispositivo">
												<td><% out.println(d.getNombre()); %></td>
												<td><%out.println(d.getDescripcion());%></td>
												<td style="color: #<%/*out.println(d.getColor())*/;%>FF0000">#FF0000<%/*out.println(d.getColor())*/;%></td>										
												<td><%out.println(d.getDescripcion());%></td>
												<td><input type="checkbox" class="mostrarDispositivo" checked="checked"/></td>
											</tr>
											<% } %>
											
										</tbody>
									</table>									
									<!-- END TABLE -->									
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- End of Dispositivos-->
					<div class="clear"></div>
										
					<div class="grid_5">
						<div class="box">
							<div class="block">
								<div class="box">
									<h2>
										Areas
										<span class="l"></span><span class="r"></span>
									</h2>
									<div class="hide"><span class="s">+</span><span class="h">-</span></div>
									<div class="block">
									<!-- BEGIN TABLE -->
									<table class="display basictable">
										<thead>
											<tr>
												<th>Nombre</th>
												<th>Descripcion</th>
												<th>Color</th>
												<th>Mostrar</th>
											</tr>
										</thead>
										<tbody>
											<% for( Area it : areasActivas) { %>
											<tr id="<% out.println(it.getIdArea()); %>" class="lineaArea">
												<td><% out.println(it.getNombre()); %></td>
												<td><%out.println(it.getDescripcion());%></td>
												<td style="color: #<%out.println(it.getColor());%>">#<%out.println(it.getColor());%></td>
												<td><input type="checkbox" class="mostrarArea" checked="checked"/></td>
											</tr>
											<% } %>
											
										</tbody>
									</table>
									<!-- END TABLE -->
									</div>
								</div>
							</div>
						</div>
					</div>
					<!-- End of grid_6 Areas-->
					<div class="clear"></div>
					
			
		<!--		</section><!-- end of #page_content
			</section><!-- end of #container_12 --> 
		</section><!-- end of #container -->
					
						
	<script src="../js/ui_calls.js" type="text/javascript"></script>
	<script src="../js/scripts.js" type="text/javascript"></script>
	</body>

</html>